<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="./../../js/cssLoader.js"></script>
<script src="./../../js/loadJs.js"></script>
<body>
<div class="layout-flex">
    <button id="nextPage">下一页</button>
    <button id="prevPage" disabled>上一页</button>
</div>
<div class="">
    <div>
        <span>当前数据总数</span>
        <span id="count"></span>
    </div>
    <div>
        <span>当前显示页数</span>
        <span id="activePage"></span>
    </div>
    <div>
        <span>当前显示数据</span>
        <span id="showData"></span>
    </div>
    <div>
        <span>已经加载的页数</span>
        <span id="loadPage"></span>
    </div>
</div>
</body>
<script>
    const dataLen = 100;

    const pageSize = 10;
    let activePage = 0;
    let loadPage = 0;

    const dataAll = new Array(dataLen).fill({}).map((item, index) => {
        return {
            index
        }
    })

    const loadData = [];
    let visibleData = [];

    /**
     * 初始化之前
     * @returns {Promise<void>}
     */
    const beforeInit = async () => {
        await loadJs(['document']);
    }
    /**
     * 远程加载数据
     * @param page
     * @returns {Promise<void>}
     */
    const fetchLoadData = async (page) => {
        const _loadData = dataAll.slice(page * pageSize, (page + 1) * pageSize);
        console.log('预加载数据',  _loadData[0].index, _loadData[_loadData.length - 1].index)
        loadData.push(..._loadData);
    }

    /**
     * 获取当前展示的数据
     * @param type next:下一页 prev:上一页
     */
    const getNewPageData = (type) => {
        const startIndex = activePage * pageSize;
        const endIndex = (activePage + 1) * pageSize;
        visibleData = loadData.slice(startIndex, endIndex);
        console.log(type, activePage, loadPage, dataLen, loadData.length)
        const prev = getDocumentById('prevPage');
        const next = getDocumentById('nextPage');
        // 下一页请求 并且
        if (type === 'next' ) {
            // 已经到达需要缓存的页面
            if (activePage === loadPage) {
                if (dataLen > loadData.length) {
                    loadPage++;
                    fetchLoadData(loadPage)
                } else {
                    console.error('已经获取了全部数据了');
                    if (next) {
                        next.setAttribute('disabled', true)
                    }
                }
            }
            if (activePage && prev) {
                prev.removeAttribute('disabled')
            }

        } else {

            if (next) {
                next.removeAttribute('disabled')
            }
            if (activePage === 0) {
                console.error('已经到达第一页了');

                if (prev) {
                    prev.setAttribute('disabled', true)
                }
            }
        }
    }

    /**
     * 设置当前页数
     */
    const setActivePage = () => {
        const activePageEl = getDocumentById('activePage');
        if (activePageEl) {
            activePageEl.innerHTML = activePage.toString();
        }
    }

    /**
     * 设置当前加载的页数
     */
    const setLoadPage = () => {
        const loadPageEl = getDocumentById('loadPage');
        if (loadPageEl) {
            loadPageEl.innerHTML = loadPage.toString();
        }
    }

    /**
     * 设置当前显示数据
     */
    const setShowCount = () => {
        const showDataEl = getDocumentById('showData');
        if (showDataEl) {
            showDataEl.innerHTML = `${visibleData[0].index}---${visibleData[visibleData.length - 1].index}`;
        }
    }

    /**
     * 添加事件监听
     */
    const addEventListen = () => {
        const next = getDocumentById('nextPage');
        next.addEventListener('click', async () => {
            activePage++;
            getNewPageData('next');
            setActivePage();
            setShowCount();
            setLoadPage();
        })

        const prev = getDocumentById('prevPage');
        prev.addEventListener('click', async () => {
            activePage--;
            getNewPageData('prev');
            setActivePage();
            setShowCount();
        })
    }

    /**
     * 初始化
     * @returns {Promise<void>}
     */
    const init = async () => {
       await beforeInit();
       await fetchLoadData(loadPage);
        getNewPageData('next');

        const countEl = getDocumentById('count');
        if (countEl) {
            countEl.innerHTML = dataLen;
        }

        addEventListen();
        setActivePage();
        setLoadPage();
        setShowCount();
    }

    init();
</script>
</html>
